<template>
    <j-modal :title="title" :width="780" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen
        @ok="handleSubmit" @cancel="handleCancel" cancelText="关闭">

        <a-spin :spinning="confirmLoading">
            <a-form :form="form">
                <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input disabled placeholder="请输入用户账号" v-if="type == 3"
            v-decorator="[ 'username', {}]"/>
                    <a-input v-else placeholder="请输入用户账号" v-decorator="['username', validatorRules.username]"
                        @change="validateAccount" ref="tagInput" />
                </a-form-item>
                <p class="ant-form-explain customValidate" v-if="focusFlag">【当前账号已存在，请确保是同一客户】</p>

                <a-form-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
                    <a-input type="password" placeholder="请输入登录密码"
                        v-decorator="['password', validatorRules.password]" />
                </a-form-item>

                <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
                    <a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登录密码"
                        v-decorator="['confirmpassword', validatorRules.confirmpassword]" />
                </a-form-item>

            </a-form>
        </a-spin>

    </j-modal>

</template>

<script>
import { changePassword, changePasswordV2, duplicateCheck } from '@/api/api'
import { httpAction } from "@api/manage";
import { computed } from 'vue';

export default {
    name: "StmSetAccount",
    data() {
        return {
            visible: false,
            confirmLoading: false,
            confirmDirty: false,
            validatorRules: {
                username: {
                    rules: [
                        { required: true, message: '请输入用户账号!' },
                        { min: 0, max: 20, message: '长度不超过 20 个字符', trigger: 'blur' },
                        // {validator: this.validateAccount}
                    ]
                },
                password: {
                    rules: [{
                        required: true,
                        message: '密码不能为空!'
                    }, {
                        validator: this.validateToNextPassword,
                    }],
                },
                confirmpassword: {
                    rules: [{
                        required: true, message: '请重新输入登录密码!',
                    }, {
                        validator: this.compareToFirstPassword,
                    }],
                },
            },

            model: {},

            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            url: {
                setAccount: '/stm/stmStoreInfo/setAccount'
            },
            form: this.$form.createForm(this),
            focusFlag: false,
            type: 1, //   1 新增账号  2设置 3 重置 
        }
    },
    computed: {
        title() {
            return this.type == 1 ? '设置账号' : (this.type == 2 ? '修改账号' : '重置密码')
        }
    },
    created() {
        console.log("created");
    },

    methods: {
        show(record) {
            this.form.resetFields();
            this.visible = true;
            this.model.username = record.account == null ? "" : record.account;
            this.model.storeId = record.storeId;
            this.$nextTick(() => {
                this.form.setFieldsValue({ username: this.model.username });
            });
        },
        close() {
            this.$emit('close');
            this.visible = false;
            this.disableSubmit = false;
            this.selectedRole = [];
        },
        // 触发表单验证
        handleSubmit() {
            this.form.validateFields((err, values) => {
                if (!err || (err.username != null && err.username.errors != null)) {
                    this.confirmLoading = true;
                    let formData = Object.assign(this.model, values);
                    formData.type = this.type > 1 ? 0 : 1;
                    // 新增1 修改0
                    httpAction(this.url.setAccount, formData, "post").then((res) => {
                        if (res.success) {
                            this.$message.success(res.message);
                            this.$emit('ok');
                        } else {
                            this.$message.warning(res.message);
                        }
                    }).finally(() => {
                        this.confirmLoading = false;
                        this.close();
                    });
                }
            })
        },
        handleCancel() {
            this.close()
        },
        validateToNextPassword(rule, value, callback) {
            const form = this.form;
            const confirmpassword = form.getFieldValue('confirmpassword');
            console.log("confirmpassword==>", confirmpassword);
            if (value && confirmpassword && value !== confirmpassword) {
                callback('两次输入的密码不一样！');
            }
            if (value && this.confirmDirty) {
                form.validateFields(['confirm'], { force: true })
            }
            callback();
        },
        compareToFirstPassword(rule, value, callback) {
            const form = this.form;
            if (value && value !== form.getFieldValue('password')) {
                callback('两次输入的密码不一样！');
            } else {
                callback()
            }
        },
        handleConfirmBlur(e) {
            const value = e.target.value
            this.confirmDirty = this.confirmDirty || !!value
        },
        // change 
        validateAccount(e, value, callback) {
            if (!e.target.value) {
                this.focusFlag = false;
                return;
            }
            var params = {
                tableName: "stm_store_info",
                fieldName: "account",
                fieldVal: e.target.value,
                dataId: this.model.id,
            };
            duplicateCheck(params).then((res) => {
                if (!res.success) {
                    this.focusFlag = true;
                    this.$refs.tagInput.focus()
                    return;
                }
                this.focusFlag = false;
            });

        }
    }
}
</script>
<style lang="less" scoped>
.customValidate {
    margin-left: 197px;
    margin-top: -17px;
    margin-bottom: 5px;
    color: #faad14;
}
</style>